<!--
 * @Description: LAN侧端口
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-08-18 11:15:44
 * @LastEditTime: 2021-11-18 21:22:46
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <el-dialog
    :title="title + '设备端口'"
    @close="cancel"
    :close-on-click-modal="false"
    width="500px"
    :visible.sync="lanStatus"
  >
    <el-form ref="ruleForm" :model="form" label-width="80px">
      <el-form-item label="类型" prop="type" key="type">
        <el-select v-model="form.type" :disabled="title === '编辑'" style="width: 100%;">
          <el-option value="LAN" label="LAN">LAN</el-option>
          <el-option
            value="WIFI-2.4"
            label="WIFI-2.4"
            v-if="site.wifis.indexOf('2.4') > -1"
          >WiFi 2.4</el-option>
          <el-option
            value="WIFI-5.8"
            label="WIFI-5.8"
            v-if="site.wifis.indexOf('5.8') > -1"
          >WiFi 5.8</el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="VPN"
        prop="vpnId"
        key="vpnId"
        :rules="[{ required: true, message: '请选择VPN', trigger: 'change'}]"
      >
        <el-select v-model="form.vpnId" style="width: 100%;" clearable>
          <el-option
            v-for="(item, index) in vpnls"
            :key="index"
            :label="item.userlabel"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="端口"
        prop="port"
        key="port"
        v-if="form.type === 'LAN'"
        :rules="[{ required: true, message: '请选择端口', trigger: 'change'}]"
      >
        <el-cascader
          v-model="form.port"
          :options="lanOptions"
          style="width: 100%;"
          :disabled="title === '编辑'"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="限速" prop="enableRateLimit" key="enableRateLimit">
        <el-switch v-model="form.enableRateLimit" :active-text="form.enableRateLimit ? '开启' : '关闭'"></el-switch>
      </el-form-item>
      <el-form-item
        v-if="form.enableRateLimit"
        label="带宽"
        prop="rateLimitValue"
        key="rateLimitValue"
        :rules="[{ required: true, message: '请输入具体数值', trigger: 'blur'}]"
      >
        <el-input placeholder="请输入数值" v-model="form.rateLimitValue">
          <template slot="append">Mbps</template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="VPN"
        prop="vpnId"
        key="vpnId"
        :rules="[{ required: true, message: '请选择VPN', trigger: 'change'}]"
      >
        <el-select v-model="form.vpnId" style="width: 100%;" clearable>
          <el-option
            v-for="(item, index) in vpnls"
            :key="index"
            :label="item.userlabel"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-row v-if="form.type === 'LAN'">
        <el-col :span="12">
          <!-- VALN -->
          <el-form-item label="VLAN" prop="vlanOpera" key="vlanOpera">
            <el-switch
              v-model="form.vlanOpera"
              :active-text="form.vlanOpera ? '开启' : '关闭'"
              :disabled="site.ha"
            ></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.vlanOpera">
          <!-- VLAN值 -->
          <el-form-item
            label="VLAN值"
            prop="vlan"
            key="vlan"
            :rules="[
              { required: true, message: '请输入VLAN值', trigger: 'blur'},
              {  min: 1, max: 4000, type: 'number', message: '范围：1-4000'}
            ]"
          >
            <el-input v-model.number="form.vlan" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 虚拟IP -->
      <template v-if="site.lanModel">
        <el-form-item label="虚拟IP">自动获取</el-form-item>
      </template>
      <template v-else>
        <el-form-item
          label="虚拟IP"
          prop="fictitiousGatewayIp"
          key="fictitiousGatewayIp"
          v-if="site.ha"
          :rules="[{ required: true, message: '不能为空', trigger: 'blur'}]"
        >
          <el-input v-model.trim="form.fictitiousGatewayIp" />
        </el-form-item>
      </template>
      <!-- 网关/掩码 -->
      <el-row v-if="!site.ha">
        <template v-if="site.lanModel">
          <el-col :span="19">
            <el-form-item label="网关">自动获取</el-form-item>
          </el-col>
        </template>
        <template v-else>
          <el-col :span="19">
            <el-form-item
              label="网关"
              prop="oneGatewayIp.ip"
              key="oneGatewayIp.ip"
              :rules="[{ required: true, message: '不能为空', trigger: 'blur'}]"
            >
              <el-input v-model.trim="form.oneGatewayIp.ip" placeholder="IP地址" />
            </el-form-item>
          </el-col>
          <el-col :span="1" style="text-align: center; line-height:40px;">/</el-col>
          <el-col :span="4">
            <el-form-item
              label-width="0"
              prop="oneGatewayIp.mask"
              key="oneGatewayIp.mask"
              :rules="[{ required: true, message: '请输入掩码', trigger: 'blur'}]"
            >
              <el-input v-model.number="form.oneGatewayIp.mask" placeholder="掩码" />
            </el-form-item>
          </el-col>
        </template>
      </el-row>
      <!-- 网关1/掩码 | 优先级 -->
      <el-row v-if="site.ha">
        <template v-if="site.lanModel">
          <el-col :span="19">
            <el-form-item label="网关1">自动获取</el-form-item>
          </el-col>
        </template>
        <template v-else>
          <el-col :span="14">
            <el-form-item
              label="网关1"
              prop="oneGatewayIp.ip"
              key="oneGatewayIp.ip"
              :rules="[{ required: true, message: '不能为空', trigger: 'blur'}]"
            >
              <el-input v-model.trim="form.oneGatewayIp.ip" placeholder="IP地址" />
            </el-form-item>
          </el-col>
          <el-col :span="1" style="text-align: center; line-height:40px;">/</el-col>
          <el-col :span="4">
            <el-form-item
              label-width="0"
              prop="oneGatewayIp.mask"
              key="oneGatewayIp.mask"
              :rules="[{ required: true, message: '请输入掩码', trigger: 'blur'}]"
            >
              <el-input v-model.number="form.oneGatewayIp.mask" placeholder="掩码" />
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="5">
          <el-form-item
            label-width="5px"
            prop="oneGatewayIp.priority"
            key="oneGatewayIp.priority"
            :rules="[
              { required: true, message: '请输入优先级', trigger: 'blur'},
              {  min: 1, max: 254, type: 'number', message: '范围：1-254'}
            ]"
          >
            <el-input v-model.number="form.oneGatewayIp.priority" placeholder="优先级" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 网关2/掩码 | 优先级 -->
      <el-row v-if="site.ha">
        <template v-if="site.lanModel">
          <el-col :span="19">
            <el-form-item label="网关2">自动获取</el-form-item>
          </el-col>
        </template>
        <template v-else>
          <el-col :span="14">
            <el-form-item
              label="网关2"
              prop="twoGatewayIp.ip"
              key="twoGatewayIp.ip"
              :rules="[{ required: true, message: '不能为空', trigger: 'blur'}]"
            >
              <el-input v-model.trim="form.twoGatewayIp.ip" placeholder="IP地址" />
            </el-form-item>
          </el-col>
          <el-col :span="1" style="text-align: center; line-height:40px;">/</el-col>
          <el-col :span="4">
            <el-form-item
              label-width="0"
              prop="twoGatewayIp.mask"
              key="twoGatewayIp.mask"
              :rules="[{ required: true, message: '请输入掩码', trigger: 'blur'}]"
            >
              <el-input v-model.number="form.twoGatewayIp.mask" placeholder="掩码" />
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="5">
          <el-form-item
            label-width="5px"
            prop="twoGatewayIp.priority"
            key="twoGatewayIp.priority"
            :rules="[
              { required: true, message: '请输入优先级', trigger: 'blur'},
              {  min: 1, max: 254, type: 'number', message: '范围：1-254'}
            ]"
          >
            <el-input v-model.number="form.twoGatewayIp.priority" placeholder="优先级" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!-- DHCP -->
          <el-form-item label="DHCP" prop="enableDhcp" key="enableDhcp">
            <el-switch v-model="form.enableDhcp" :active-text="form.enableDhcp ? '开启' : '关闭'"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-show="false">
          <!-- DNS Proxy -->
          <el-form-item label="DNS" prop="dnsProxy" key="dnsProxy">
            <el-switch
              v-model="form.dnsProxy"
              :active-text="form.dnsProxy ? '开启Proxy' : '关闭Proxy'"
              disabled
            ></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="form.enableDhcp">
        <!-- 地址池 -->
        <el-row>
          <template v-if="site.lanModel">
            <el-col :span="14">
              <el-form-item label="地址池">自动获取</el-form-item>
            </el-col>
          </template>
          <template v-else>
            <el-col :span="14">
              <el-form-item
                label="地址池"
                prop="ipPoolFrom"
                key="ipPoolFrom"
                :rules="[{ required: true, message: '不能为空', trigger: 'blur'}]"
              >
                <el-input v-model.trim="form.ipPoolFrom" />
              </el-form-item>
            </el-col>
            <el-col :span="1" style="text-align: center; line-height:40px;">-</el-col>
            <el-col :span="9">
              <el-form-item
                label-width="0"
                prop="ipPoolTo"
                key="ipPoolTo"
                :rules="[{ required: true, message: '不能为空', trigger: 'blur'}]"
              >
                <el-input v-model.trim="form.ipPoolTo" />
              </el-form-item>
            </el-col>
          </template>
        </el-row>
        <el-row v-if="!form.dnsProxy">
          <el-col :span="14">
            <!-- 主DNS -->
            <el-form-item
              label="DNS"
              prop="primaryDns"
              key="primaryDns"
              :rules="[{ required: true, message: '不能为空', trigger: 'blur'}]"
            >
              <el-input v-model.trim="form.primaryDns" placeholder="主DNS" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <!-- 备DNS -->
            <el-form-item
              label-width="5px"
              prop="backupDns"
              key="backupDns"
              :rules="[{ required: true, message: '不能为空', trigger: 'blur'}]"
            >
              <el-input v-model.trim="form.backupDns" placeholder="备DNS" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <!--取 消  确 定-->
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['vpnls', 'site', 'options', 'lanForm', 'lanIndex', 'lanStatus'],
  data () {
    return {
      title: '添加',
      form: {
        enableRateLimit: false
      }
    };
  },
  computed: {
    lanOptions () {
      let arry = [];
      if (this.site.neType === 'ZXR10_230' || this.site.neType === 'ZXWT_ISG1800_2S') {
        arry = [{
          value: '0',
          label: '槽位0',
          children: [{
            value: '1',
            label: '端口1',
            children: [{
              value: 'gei-0/1',
              label: 'Port-0/1',
            }]
          }, {
            value: '2',
            label: '端口2',
            children: [{
              value: 'gei-0/2',
              label: 'Port-0/2',
            }]
          }]
        }];
      }
      if (this.site.neType === 'ZXWT_ISG280') {
        arry = [{
          value: '0',
          label: '槽位0',
          children: [{
            value: '1',
            label: '端口1',
            children: [{
              value: 'gei-0/1',
              label: 'Port-0/1',
            }]
          }, {
            value: '2',
            label: '端口2',
            children: [{
              value: 'gei-0/2',
              label: 'Port-0/2',
            }]
          }, {
            value: '3',
            label: '端口3',
            children: [{
              value: 'gei-0/3',
              label: 'Port-0/3',
            }]
          }, {
            value: '4',
            label: '端口4',
            children: [{
              value: 'gei-0/4',
              label: 'Port-0/4',
            }]
          }, {
            value: '5',
            label: '端口5',
            children: [{
              value: 'gei-0/5',
              label: 'Port-0/5',
            }]
          }]
        }];
      }
      if (this.site.neType === 'ZXR10_260' || this.site.neType === 'ZXWT_ISG') {
        arry = [{
          value: '0',
          label: '槽位0',
          children: [{
            value: '1',
            label: '端口1',
            children: [{
              value: 'gei-0/1',
              label: 'Port-0/1',
            }]
          }, {
            value: '2',
            label: '端口2',
            children: [{
              value: 'gei-0/2',
              label: 'Port-0/2',
            }]
          }, {
            value: '3',
            label: '端口3',
            children: [{
              value: 'gei-0/3',
              label: 'Port-0/3',
            }]
          }, {
            value: '4',
            label: '端口4',
            children: [{
              value: 'gei-0/4',
              label: 'Port-0/4',
            }]
          }, {
            value: '5',
            label: '端口5',
            children: [{
              value: 'gei-0/5',
              label: 'Port-0/5',
            }]
          }, {
            value: '6',
            label: '端口6',
            children: [{
              value: 'gei-0/6',
              label: 'Port-0/6',
            }]
          }, {
            value: '7',
            label: '端口7',
            children: [{
              value: 'gei-0/7',
              label: 'Port-0/7',
            }]
          }]
        }];
      }
      if (this.site.neType === 'ZXWT_ISG6800_4E') {
        arry = [{
          value: '0',
          label: '槽位0',
          children: [{
            value: '1',
            label: '端口1',
            children: [{
              value: 'gei-0/1',
              label: 'Port-0/1',
            }]
          }, {
            value: '2',
            label: '端口2',
            children: [{
              value: 'gei-0/2',
              label: 'Port-0/2',
            }]
          }]
        }, {
          value: '1',
          label: '槽位1',
          children: [{
            value: '1',
            label: '端口1',
            children: [{
              value: 'gei-1/1',
              label: 'Port-1/1',
            }]
          }, {
            value: '2',
            label: '端口2',
            children: [{
              value: 'gei-1/2',
              label: 'Port-1/2',
            }]
          }, {
            value: '3',
            label: '端口3',
            children: [{
              value: 'gei-1/3',
              label: 'Port-1/3',
            }]
          }, {
            value: '4',
            label: '端口4',
            children: [{
              value: 'gei-1/4',
              label: 'Port-1/4',
            }]
          }, {
            value: '5',
            label: '端口5',
            children: [{
              value: 'gei-1/5',
              label: 'Port-1/5',
            }]
          }, {
            value: '6',
            label: '端口6',
            children: [{
              value: 'gei-1/6',
              label: 'Port-1/6',
            }]
          }]
        }];
      }
      if (this.site.neType !== 'ZXR10_230' && this.site.neType !== 'ZXR10_260'
        && this.site.neType !== 'ZXWT_ISG' && this.site.neType !== 'ZXWT_ISG1800_2S'
        && this.site.neType !== 'ZXWT_ISG280' && this.site.neType !== 'ZXWT_ISG6800_4E') {
        arry = this.options;
      }
      return arry;
    }
  },
  watch: {
    lanStatus: {
      immediate: true,
      handler (val) {
        if (val) {
          if (this.lanIndex === null) {
            this.title = '添加';
            this.form = {
              port: null,
              vpnId: null,
              type: 'LAN',
              vlanOpera: this.site.ha ? true : false,
              vlan: null,
              fictitiousGatewayIp: null,
              oneGatewayIp: {
                ip: null,
                mask: null,
                priority: null
              },
              twoGatewayIp: {
                ip: null,
                mask: null,
                priority: null
              },
              enableDhcp: true,
              dnsProxy: this.site.dnsProxy,
              ipPoolFrom: null,
              ipPoolTo: null,
              primaryDns: '114.114.114.114',
              backupDns: '8.8.8.8',
              enableRateLimit: false,
              rateLimitValue: null
            };
          } else {
            this.title = '编辑';
            this.form = this.lanForm;
            this.form.vlan = this.lanForm.vlanOpera ? Number(this.lanForm.vlan) : null;
            // HA
            if (this.site.ha) {
              this.form.oneGatewayIp.priority = Number(this.lanForm.oneGatewayIp.priority);
              this.form.twoGatewayIp.priority = Number(this.lanForm.twoGatewayIp.priority);
              // LAN Model
              if (!this.site.lanModel) {
                this.form.oneGatewayIp.mask = Number(this.lanForm.oneGatewayIp.mask);
                this.form.twoGatewayIp.mask = Number(this.lanForm.twoGatewayIp.mask);
              }
            } else {
              if (!this.site.lanModel) {
                this.form.oneGatewayIp.mask = Number(this.lanForm.oneGatewayIp.mask);
              }
            }
          }
        }
      }
    }
  },
  methods: {
    // 判断输入是否符合
    // eslint-disable-next-line complexity
    validateForm () {
      let _this = this;
      let arry = [];
      // 判断是否高可用
      if (_this.site.ha) {
        // 优先级
        let onePriority = _this.form.oneGatewayIp.priority;
        let twoPriority = _this.form.twoGatewayIp.priority;
        // 判断是否自动获取
        if (!_this.site.lanModel) {
          // 网关地址
          let oneIp = _this.form.oneGatewayIp.ip;
          let twoIp = _this.form.twoGatewayIp.ip;
          // 虚拟IP
          let ip = _this.form.fictitiousGatewayIp;
          if (oneIp === twoIp || oneIp === ip || twoIp === ip) {
            arry.push('虚拟IP与网关1、2地址不能相同！');
          } else {
            // 地址池
            let from = _this.form.ipPoolFrom;
            let to = _this.form.ipPoolTo;
            // 判断是否开启DHCP
            if (_this.form.enableDhcp) {
              // 判断是否在同一网段
              if (oneIp.substr(0, oneIp.lastIndexOf('.')) === twoIp.substr(0, twoIp.lastIndexOf('.')) && oneIp.substr(0, oneIp.lastIndexOf('.')) === from.substr(0, from.lastIndexOf('.')) && oneIp.substr(0, oneIp.lastIndexOf('.')) === ip.substr(0, ip.lastIndexOf('.')) && oneIp.substr(0, oneIp.lastIndexOf('.')) === to.substr(0, to.lastIndexOf('.'))) {
                // 判断优先级是否相等
                // eslint-disable-next-line max-depth
                if (onePriority === twoPriority) {
                  arry.push('网关1、2优先级不能相同！');
                } else {
                  // 判断地址池区间是否正确
                  // eslint-disable-next-line max-depth
                  if (Number(from.substr(from.lastIndexOf('.') + 1, from.length)) >= Number(to.substr(to.lastIndexOf('.') + 1, to.length))) {
                    arry.push('地址池区间有误！');
                  }
                }
              } else {
                arry.push('虚拟IP、网关1、2与地址池不在同一网段！');
              }
            } else {
              // 判断是否在同一网段
              if (oneIp.substr(0, oneIp.lastIndexOf('.')) === twoIp.substr(0, twoIp.lastIndexOf('.')) && oneIp.substr(0, oneIp.lastIndexOf('.')) === ip.substr(0, ip.lastIndexOf('.'))) {
                // 判断优先级是否相等
                // eslint-disable-next-line max-depth
                if (onePriority === twoPriority) {
                  arry.push('网关1、2优先级不能相同！');
                } else {
                  // 判断地址池区间是否正确
                  // eslint-disable-next-line max-depth
                  if (from & to) {
                    // eslint-disable-next-line max-depth
                    if (Number(from.substr(from.lastIndexOf('.') + 1, from.length)) >= Number(to.substr(to.lastIndexOf('.') + 1, to.length))) {
                      arry.push('地址池区间有误！');
                    }
                  }
                }
              } else {
                arry.push('虚拟IP与网关1、2不在同一网段！');
              }
            }
          }
        } else {
          // 判断优先级是否相等
          if (onePriority === twoPriority) {
            arry.push('网关1、2优先级不能相同！');
          }
        }
      } else {
        // 网关地址
        let ip = _this.form.oneGatewayIp.ip;
        // 地址池
        let from = _this.form.ipPoolFrom;
        let to = _this.form.ipPoolTo;
        // 判断是否自动获取
        if (!_this.site.lanModel) {
          // 判断是否开启DHCP
          if (_this.form.enableDhcp) {
            // 判断网关与地址池是否在同一网段
            if (ip.substr(0, ip.lastIndexOf('.')) === from.substr(0, from.lastIndexOf('.')) && ip.substr(0, ip.lastIndexOf('.')) === to.substr(0, to.lastIndexOf('.'))) {
              // 判断地址池区间是否正确
              if (Number(from.substr(from.lastIndexOf('.') + 1, from.length)) >= Number(to.substr(to.lastIndexOf('.') + 1, to.length))) {
                arry.push('地址池区间有误！');
              }
            } else {
              arry.push('网关与地址池不在同一网段！');
            }
          }
        }
      }
      return arry;
    },
    // 提交
    onSubmit () {
      let _this = this;
      _this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          let result = _this.validateForm();
          if (result.length === 0) {
            _this.cancel();
            if (_this.title === '添加') {
              if (_this.form.type === 'LAN') {
                _this.$emit('addLanRow', _this.form);
              } else {
                _this.form.port = null;
                _this.form.vlanOpera = null;
                _this.form.vlan = null;
                _this.$emit('addLanRow', _this.form);
              }
            } else {
              _this.form.vpnUserLabel = _this.vpnls.find(item => item.id === _this.form.vpnId).userlabel;
              _this.$message.success('更新成功！');
            }
          } else {
            _this.$message.error(result[0]);
          }
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    },
    // 取消
    cancel () {
      let _this = this;
      _this.$emit('changeLanStatus', false);
    }
  }
};
</script>

<style>
</style>